<template>
    <div class="page">
        <div class="header">
            <van-icon name="arrow-left" @click="back" />
            <div>我的设置</div>
            <div></div>
        </div>
        <div class="item" style="height:1.2rem;">
            <div class="item-left">头像</div>
            <div>
                <!-- <img  :src="userInfo.head_ico" style="width:0.7rem;height:0.7rem;"> -->
                <input id="file" type="file" @change="updataImg" style="display:none">
                <label for="file" :style="{backgroundImage:'url('+userInfo.head_ico+')'}"></label>
            </div>
        </div>
        <div class="item" @click="changeUserNameShow=true">
            <div class="item-left" >用户名</div>
            <div class="item-right">{{userInfo.true_name}}</div>
        </div>
        <div class="item">
            <div class="item-left" >性别</div>
            <div class="item-right">
                <span>{{userInfo.sex==1?"男":"女"}}</span>
                <!-- <van-icon name="arrow" /> -->
            </div>
        </div>
        <div class="item" @click="changeMobileShow=true">
            <div class="item-left" >手机号</div>
            <div class="item-right">
                <span>{{userInfo.mobile}}</span>
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="item" @click="changePasswordShow=true">
            <div class="item-left" >更改密码</div>
            <div class="item-right">
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="null"></div>
        <div class="item" >
            <div class="item-left" >清除缓存</div>
        </div>
        <div @click="btun" class="btn">退出登录</div>

        <!-- 修改用户名弹窗 -->
        <van-dialog
            v-model="changeUserNameShow"
            show-cancel-button
            @confirm='changeUserName'>
        <van-field
            v-model="true_name"
            label="用户名"
            placeholder="请输入用户名"/>
        </van-dialog>
        <!-- 修改手机号名弹窗 -->
        <van-dialog
            v-model="changeMobileShow"
            show-cancel-button
            @confirm='changeMobile'>
        <van-field
            v-model="mobile"
            label="手机号"
            placeholder="请输入用户手机号"/>
        </van-dialog>
        <!-- 修改密码 -->
        <van-dialog
            v-model="changePasswordShow"
            show-cancel-button
            @confirm='changePassword'>
        <van-field
            v-model="passname"
            label="用户名"
            placeholder="请输入手机号"/>
        <van-cell-group>
          <van-field
              v-model="passyan"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
            <van-button @click="Yan1" :disabled="!this.canClick" slot="button" size="small" type="primary">{{content}}</van-button>
          </van-field>
        </van-cell-group>
        <van-field
            v-model="password"
            label="密码"
            placeholder="请输入新密码"/>
        <van-field
            v-model="password1"
            label="确认密码"
            placeholder="请确认密码"/>
        </van-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            userInfo:{},
            // 修改用户名
            changeUserNameShow: false,
            true_name:'',
            // 修改手机号
            changeMobileShow:false,
            mobile:'',
            // 修改密码
            changePasswordShow:false,
            password:'',      // 新密码
            password1:'',     //确认新密码
            passname:'',      // 手机号
            passyan:'',       // 手机验证码
            totalTime: 60,    // 短信验证按钮60秒
            canClick: true, //添加canClick
            content: '发送验证码',  // 按钮里显示的内容
        }
    },
    methods:{
      countDown () {
       if (!this.canClick) return  //改动的是这两行代码
       this.canClick = false
       this.content = this.totalTime + 's'
       let clock = window.setInterval(() => {
        this.totalTime--
        this.content = this.totalTime + 's'
        if (this.totalTime < 0) {
         window.clearInterval(clock)
         this.content = '重新发送验证码'
         this.totalTime = 60
         this.canClick = true  //这里重新开启
        }
       },1000)
      },
      // 退出登录
        btun(){
          this.request({
              url: '?controller=theapi&action=logout',
              method: 'get',

          }).then(res=>{
            console.log(res)
              if(res.data.return_code=="success"){
                this.$toast(res.data.data);
                this.$router.push('login');
              }
              // else if(res.data.return_code=="success"){

              // }
          })
        },
        // 修改用户名
        changeUserName(){
            this.request({
                url: '?controller=theapi&action=edit_uinfo',
                method: 'get',
                params: {
                    true_name:this.true_name,
                }
            }).then(res=>{
                if(res.data.return_code=="success"){
                    this.userInfo.true_name=res.data.data.true_name
                }
            })
        },

        // 修改用户手机号
        changeMobile(){
            this.request({
                url: '?controller=theapi&action=edit_uinfo',
                method: 'get',
                params: {
                    mobile:this.mobile,
                }
            }).then(res=>{
                if(res.data.return_code=="success"){
                    this.userInfo.mobile=res.data.data.mobile

                }
            })
        },
        // 获取验证码
        Yan1(){
          this.request({
              url: '?controller=simple&action=_sendMobileCode',
              method: 'get',
              params: {
                  mobile:this.passname,
              }
          }).then(res=>{
            if(res.data == '请填写正确的手机号码'){
              this.$toast('请填写正确的手机号码');
            }else if(res.data == 'error'){
              this.$toast('请填写正确的手机号码');
            }else{
              this.countDown();
            }
              console.log(res)
          })
        },
        // 修改密码
        changePassword(){
          if(this.password == this.password1){
            this.request({
                url: '?controller=theapi&action=password_edit',
                method: 'get',
                params: {
                    password:this.password,
                    mobile: this.passname,
                    mobile_code: this.passyan
                }
            }).then(res=>{
              if(res.data == 'success'){
                this.$toast('修改密码成功');
                this.$router.push('/login')
              }else if(res.data == '修改密码成功'){
                this.$toast('修改密码成功');
                this.$router.push('/login')
              }else{
                this.$toast('修改密码失败');
              }
                console.log(res)
            })
          }else{
            this.$toast('请确认两次密码一致');
          }
          console.log(this.password)
        },
        // 上传头像
        updataImg(e){
            var imgFile = e.target.files[0];
            let formData=new FormData();//通过formdata上传
            formData.append('file',imgFile);
            this.request.post('?controller=theapi&action=user_ico_upload',formData,{

                headers:{
                    'Content-Type':'multipart/form-data'
                },
                method:"post",

            }).then(res=>{
                console.log(res,"上传头像")
                if(res.data.data.error=='上传成功'){
                    this.$toast('上传头像成功');
                    this.userInfo.head_ico=res.data.data.fileSrc
                }
            })
        },
        back(){
            this.$router.go(-1);//返回上一页
        },
    },
    mounted(){
        this.request({
            url: '?controller=theapi&action=userinfo',
            method: 'get',
        }).then(res=>{
            if(res.data.return_code=="success"){
                this.userInfo=res.data.data
            }
        })
    }

}
</script>
<style scoped>
    .header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 0.88rem;
        font-size: 0.4rem;
        border-bottom: 1px solid #e6e6e6;
        box-sizing: border-box;

    }
    .item{
        padding:0 0.3rem;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e6e6e6;
        font-size: 0.3rem;
    }
    .item-right{
        display: flex;
        align-items: center;
    }
    .btn{
        width: 6.25rem;
        line-height: 0.9rem;
        text-align: center;
        color: white;
        font-size: 0.3rem;
        margin: auto;
        margin-top: 1rem;
        height:0.9rem;
        background:linear-gradient(-90deg,rgba(255,109,116,1),rgba(245,46,103,1),rgba(255,83,103,1));
        border-radius:12px;
    }
    .null{background: #f3f3f3;height: 0.3rem;}
    label{
        display:block;width:0.7rem;height:0.7rem;
        background-size: 100% 100%
    }
</style>
